<!-- [COMPONENT] : 用户选择下拉框
使用示例：
1） 下拉框
<select-user  v-model="xxxx"  placeholder="请选择xxx"/>
<select-user  v-model="xxxx"  placeholder="请选择xxx" label="xxxName"/>
2） 列数据
<select-user  isCol  :value="scope.row.userId"/>
<select-user  isCol  :value="scope.row.userId" label="xxxName"/>
-->
<template>
  <span v-if="isCol">
    <span  v-for="xx in getCol"  class="col" >
      {{xx.nickName}}
    </span>
  </span>
  <span v-else>
    <string-multiple-select
      v-model="selectedValue"
      :placeholder="placeholder"
      :clearable="clearable"
      :disabled="disabled"
      :multiple="multiple"
      :filterable="filterable"
      :loading="loading"
      @change="handleChange"
      @focus="handleFocus"
    >
    <el-option
      v-for="obj in options"
      :key="obj.userId"
      :label="obj.nickName +' - ' + obj.dept.deptName"
      :value="obj.userId"
    />

      <!-- 加载状态或无数据提示 -->
    <template #empty>
      <div class="empty-text">
        {{ loading ? '加载中...' : '暂无数据' }}
      </div>
    </template>
    </string-multiple-select>
</span>

</template>


<script>
import {listUser} from "@/api/common/selector";

import {initData, baseMethods} from "../base";

let baseData = initData("SelectUser", "选择人员", "userId");

export default {
  ...baseData,
  methods: {
    ...baseMethods(listUser),
  }
}

</script>

<style scoped>
.col {
  display: inline-block;
  margin-right: 10px;
  /*border-bottom: 1px dotted;*/
}
.empty-text {
  padding: 10px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
}
</style>
